<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true"><block slot="content">我的消息</block></cu-custom>
		<!-- <view class="padding text-center text-gray" v-show="noticesPageInfo.records.length === 0">您没有任何消息......</view> -->
		<view class="cu-list menu-avatar">
			<view
				class="cu-item"
				:class="modalName == 'move-box-' + index ? 'move-cur' : ''"
				v-for="(item, index) in noticesPageInfo.records"
				:key="index"
				@touchstart="ListTouchStart"
				@touchmove="ListTouchMove"
				@touchend="ListTouchEnd"
				:data-target="'move-box-' + index"
			>
				<view class="cu-avatar round lg" :style="'backgroundImage: url(' + item.creatorAvatar + ')'"><view class="cu-tag badge" v-show="item.status === 0"></view></view>
				<view class="content my-content" style="width: 78%;">
					<view>
						<view class="margin-right-xs text-sm text-bold">{{ item.creatorName }}</view>
						<view class="text-gray text-sm">
							{{ item.type + '了' }}
							<view class="my-text-blue text-blue" @click="toImageDetails(item.targetId, item.id)">{{ item.targetName | shortTextFilter }}</view>
						</view>
					</view>
					<view class="text-gray text-sm" v-show="item.content && item.content.length > 0">
						{{item.content}}
					</view>
					<view class="text-gray text-sm">
						<text class="cuIcon-timefill text-gray margin-right-xs"></text>
						{{ item.createTime }}
					</view>
				</view>
				<!-- <view class="action">
					 <view class="text-grey text-xs">22:20</view>
					<view class="cu-tag round bg-grey sm">5</view> 
				</view> -->
				<view class="move">
					<view class="bg-grey" @click="handleReadNotice(item.id)">标为已读</view>
					<view class="bg-red" @click="handleDelNotice(item.id)">删除</view>
				</view>
			</view>
			<view class="padding text-center text-gray" v-show="showNoMore">没有更多内容了哦......</view>
		</view>
	</view>
</template>

<script>
import { checkTokenInStore } from '../../permission/index';
import { fetchNoticesApi, delNoticeByIdApi, updateNoticeStatusApi } from '../../api/http';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			noticesPageInfo: {
				current: 1,
				size: 10,
				total: 0,
				records: []
			},
			modalName: null,
			showNoMore:true,
		};
	},
	filters:{
		shortTextFilter(value) {
			if (value.length > 14) {
				return value.slice(0,14) + "...";
			} else {
				return value
			}
		}
	},
	computed: {
		...mapState({
			userInfo: state => state.userInfo
		})
	},
	onLoad() {
		checkTokenInStore();
		this.getFirstPageNotices();
	},
	onPullDownRefresh() {
		this.getFirstPageNotices();
		uni.stopPullDownRefresh();
	},
	onReachBottom() {
		if (this.noticesPageInfo.current * this.noticesPageInfo.size >= this.noticesPageInfo.total) {
			this.showNoMore = true;
			return;
		}
		this.getNextPageNotices();
	},
	methods: {
		getFirstPageNotices() {
			this.noticesPageInfo = {
				current: 1,
				size: 10,
				total: 0,
				records: []
			};
			fetchNoticesApi({
				page: this.noticesPageInfo.current,
				limit: this.noticesPageInfo.size,
				ownerId: this.userInfo.id
			}).then(res => {
				this.noticesPageInfo = res.data;
			});
		},
		getNextPageNotices() {
			fetchNoticesApi({
				page: this.noticesPageInfo.current + 1,
				limit: this.noticesPageInfo.size,
				ownerId: this.userInfo.id
			}).then(res => {
				const _info = res.data;
				this.noticesPageInfo.current = _info.current;
				this.noticesPageInfo.size = _info.size;
				this.noticesPageInfo.records = this.noticesPageInfo.records.concat(_info.records);
				this.noticesPageInfo.total = _info.total;
			});
		},
		// ListTouch触摸开始
		ListTouchStart(e) {
			this.listTouchStart = e.touches[0].pageX;
		},

		// ListTouch计算方向
		ListTouchMove(e) {
			this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left';
		},

		// ListTouch计算滚动
		ListTouchEnd(e) {
			if (this.listTouchDirection == 'left') {
				this.modalName = e.currentTarget.dataset.target;
			} else {
				this.modalName = null;
			}
			this.listTouchDirection = null;
		},
		handleDelNotice(id) {
			delNoticeByIdApi(id).then(res => {
				this.noticesPageInfo.records = this.noticesPageInfo.records.filter((item, index) => item.id != id);
			});
		},
		handleReadNotice(id) {
			updateNoticeStatusApi({ id: id, status: 1 }).then(res => {
				for (let item of this.noticesPageInfo.records) {
					if (item.id === id) {
						item.status = 1;
					}
				}
			});
		},
		toImageDetails(imageId, noticeId) {
			updateNoticeStatusApi({ id: noticeId, status: 1 }).then(res => {
				for (let item of this.noticesPageInfo.records) {
					if (item.id === noticeId) {
						item.status = 1;
					}
				}
			});
			uni.navigateTo({
				url: '../image_details/image_details?id=' + imageId
			});
		}
	}
};
</script>

<style lang="scss">
.my-content {
	.my-text-blue {
		display: inline-block;
	}
}
</style>
